<template name="workOrderIntroduce">
	<view>
		<view class="news" v-for="(item, index) in intro" :key="index">
			<view class="navw" >
				<view class="main" @click="toRepairDetail(item.num)">
					<view class="intro-main">
						<text class="intro-information">[{{item.date}}] {{item.num}} {{item.person}}</text>
						<text class="intro-condition-reject" v-if="item.bool_condition==-1">{{item.condition}}</text>
						<text class="intro-condition-await" v-if="item.bool_condition==0">{{item.condition}}</text>
						<text class="intro-condition-processing" v-if="item.bool_condition==1">{{item.condition}}</text>
						<text class="intro-condition-finish" v-if="item.bool_condition==2">{{item.condition}}</text>
						<text class="intro-condition-feedback" v-if="item.bool_condition==3">{{item.condition}}</text>

					</view>
					<view class="intro-details">
						<view class="intro-pic-border">
							<image :src="item.pic_url" mode="widthFix" class="intro-picture"></image>
							<!-- http://p1362.bvimg.com/10465/c3a9c337f395eaf7.png -->
						</view>
						<view class="intro-context-border">
							<view class="iconfont intro-address">
								{{item.campus}}·{{item.roomNo}}
							</view>
							<view class="intro-info">
								{{item.Info}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		props: ["intro"],
		methods: {
			toRepairDetail(id){
				uni.navigateTo({
					url:'../../pagesRepairCenter/maintenanceDetails/maintenanceDetails?id='+id
				})
			}
		}
	}
</script>

<style>
	@import url("../../../common/iconfont.css");

	.news {
		background-color: white;
	}

	.navw {
		display: flex;
		padding: 34rpx 0;
		margin: 0 30rpx;
		border-bottom: 0.24rpx solid #eae9e9;
	}


	.main {
		position: relative;
		flex: 1;
	}

	.intro-main {
		position: relative;
	}

	.intro-details {
		margin-top: 30rpx;
		display: flex;
	}

	.intro-title {
		font-size: 32rpx;
	}

	.intro-condition-reject,
	.intro-condition-await,
	.intro-condition-processing,
	.intro-condition-finish,
	.intro-condition-feedback {
		position: absolute;
		font-size: 24rpx;
		right: 0;
		color: white;
		padding: 5rpx;
		border-radius: 10rpx;
		box-shadow: 10rpx 10rpx 20rpx #dbdcdb;
	}

	.intro-condition-finish {
		background-color: #A1BF56 !important;
	}

	.intro-condition-await {
		background-color: #fcbd03 !important;
	}

	.intro-condition-reject {
		background-color: #fc060b !important;
	}

	.intro-condition-processing {
		background-color: #ffaaff !important;
	}

	.intro-condition-feedback {
		background-color: #00aaff !important;
	}

	.intro-pic-border {
		flex: 1;
	}

	.intro-picture {

		width: 110rpx;
		box-shadow: 5rpx 5rpx 20rpx #dbdcdb;
	}

	.intro-context-border {
		flex: 4;
	}

	.intro-info {
		font-size: 28rpx;
		word-break: break-word;
		/* 不允许单词内换行 */
		text-overflow: ellipsis;
		/* 超出部分为省略号 */
		color: #535453;
		display: -webkit-box;
		/* 设置为伸缩盒 */
		-webkit-box-orient: vertical;
		/* 子元素排列方式 */
		-webkit-line-clamp: 2;
		/* 显示行数 */
		overflow: hidden;
		/* 超出部分隐藏 */
	}

	.intro-address {
		font-size: 28rpx;
		color: #939493;
		margin-bottom: 10rpx;
	}

	.intro-address:before {
		content: '\e60e';
	}

	.intro-information {
		font-size: 32rpx;
	}
</style>
